import React, { Component } from 'react'
import { Progress, Upload, Button, message } from 'antd';
import { UploadOutlined } from '@ant-design/icons';
import MusicAPI from '@/services/ant-design-pro/music'
import tools from '@/utils/tools'

import './uploadMusic.less'
const { addMusicFile } = MusicAPI;
let chunkSize = (1024 * 1024) / 2;
class Uploaed extends Component {
    state = {
        file: null,
        percent: 0,
        uploading: false,
        iscanLode: false
    }
    validate = () => {
        const { file } = this.state;
        const isAudio = file.type === 'audio/mpeg';
        // audio/wav
        if (!(isAudio)) {
            message.error('只能上传audio/mpeg格式的文件~');
            return false;
        }
        return true;
    }

    handleUpload = (index) => {
        const { file, uid } = this.state;
        if (!file) {
            return
        }
        let filename = file.name;
        let suffix = filename.substring(filename.lastIndexOf(".") + 1);

        let fname = file.name.split(`.${suffix}`)[0];
        // let [fname, fext] = file.name.split('.');
        let start = index * chunkSize;
        let percent = Math.floor(((start + chunkSize) / file.size) * 100); //进度条
        this.setState({
            percent: percent >= 100 ? 100 : percent
        })

        if (start > file.size) {
            this.props.isCanUpload({
                status: true,
                filename: file.name
            });
            this.setState({
                uploading: false,
                iscanLode: false
            })
            return;
        }

        let blob = file.slice(start, start + chunkSize);
        let blobName = `${fname}_${uid}.${suffix}`;
        let blobFile = new File([blob], blobName)

        let formData = new FormData();
        formData.append('file', blobFile)
        formData.append('index', index)  // 文件分片编号
        formData.append('suffix', suffix) // 后缀

        addMusicFile(formData).then(res => {
            console.log(percent + "%", res.data.message);
            this.props.onUploadChange({
                percent,
                value: res.data.value,
                status: true,
            });
            this.handleUpload(++index);
        })
    }

    render() {
        const { percent, uploading, iscanLode } = this.state;

        const props = {
            beforeUpload: file => {
                this.setState({ file, uid: tools.generate(), iscanLode: true });
                return false;
            }
        };

        return (
            <div className="m-upload">
                <h4>文件上传</h4>
                <div className="m-upload-right">
                    {
                        uploading ? <Progress
                            type="circle"
                            width={50}
                            strokeColor={{
                                '0%': '#108ee9',
                                '100%': '#87d068',
                            }}
                            percent={percent}
                        /> :
                            <Button type="primary" disabled={iscanLode ? "" : true} onClick={() => {
                                if (this.validate()) {
                                    this.setState({
                                        uploading: true
                                    })
                                    this.handleUpload(0)
                                }
                            }}>
                                开始上传
                            </Button>
                    }
                </div>
                <div className="m-upload-left   ">
                    <Upload maxCount={1} {...props}>
                        <Button icon={<UploadOutlined />}>选择文件</Button>
                    </Upload>
                </div>

            </div >
        );
    }
}

export default Uploaed;